import type { FC, PropsWithChildren } from 'react'
import { getRgb } from '../../../common/utils'
import { context } from '../../../common/context'

const Index: FC<PropsWithChildren & { style?: React.CSSProperties }> = ({ children, ...props }) => {
  const { resume: { customization } } = context

  const { spacingFactor } = customization.spacing || {}
  const { title } = customization
  const { titleBkg: bkg } = title || {}
  let titleBkg = 'rgba(0,0,0,.04)'
  if (bkg) {
    titleBkg = getRgb(bkg)
  }
  return <div {...props } style={{ ...props.style, "position": 'relative', "paddingBottom": `${(spacingFactor || 0) * 2 + 10}px`, '--color': titleBkg } as any}>
    {
      children
    }
  </div>
}
export default Index
